<template>
	<view class="tabBar flex flex--row" style="margin-top: 5%;
    padding-top: 5%;">
		<!-- 头部 -->
		<view class="index_head flex flex--row" :style="{ height: navHeight + 'px'}">
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="index_head_con flex flex--align-items--center flex--justify-content--center"
				:style="{ height: navHeightNoBar + 'px' }">
				<template v-if="isShow">
					<template v-if="identity == 1 && !accountShow">
						<view class="index_head_con_btn" @click="goApply">申请城市接单员</view>
					</template>
					<template v-else-if="identity == 2">
						<view class="index_head_con_btn" @click="goPlayHome">接单工作台</view>
					</template>
				</template>
			</view>
		</view>

		<view class="box">
			<hallList v-if="activeShow==1" @getSortPlayList="getSortPlayList" :swiperList="swiperList"
				:playList="playList" :labelList="labelList" :playType="playType" :moneyList="moneyList"
				:userInfo="userInfo" :showEnd="showEnd" :nums="nums" @imageLoad="imageLoad" @badImg="badImg"
				:address="address" @setLabel="setLabel" @choiceDoWhat="choiceDoWhat" @goAddWeixi="goAddWeixi"
				:ipAddress="ipAddress" />
			<dispatch v-if="activeShow==2" :playList="playList" :labelList="labelList" :moneyList="moneyList"
				:userInfo="userInfo" :nums="nums" :reward="reward" :address="address" @setLabel="setLabel" @choiceDoWhat="choiceDoWhat"
				@goAddWeixi="goAddWeixi">
			</dispatch>
			<helpHappy v-if="activeShow==3" :ipAddress="ipAddress" :playList="playList" :userInfo="userInfo"
				@searchInput="searchInput" :showEnd="showEnd"></helpHappy>
			<my v-if="activeShow==4" :addServWeixin="addServWeixin" :addPersonalWeixin="addPersonalWeixin"
				:codeImage="codeImage" :wxCode="wxCode" :userInfo="userInfo" :orderCount="orderCount"
				@returnMy="returnMy" @openAddKuWeixin="openAddKuWeixin" @openAddPersonalWeixin="openAddPersonalWeixin" @scanCode="scanCode">
			</my>
		</view>
		<!--弹窗-->
		<view v-if="dialog" class="dialog" @tap="hideDialog()">
			<view :class="['dialog_content',dialog==true?'showImg':'hideImg']">
				<view class="dialog_content_desc">
					<view class="dislog_title">您有新的陪玩订单消息</view>
					<view style="margin: 20rpx 0;">
						<view>
							用户
							<text class="heightLightText">{{newOrder.msg.user}}</text>要和你玩
							<text class="heightLightText">{{newOrder.msg.server_content}}</text>
						</view>
						<view>
							于<text class="heightLightText">{{newOrder.msg.svctm}}</text>
							在<text class="heightLightText">{{newOrder.msg.address}}</text>
						</view>
						<view>陪玩时长为 <text class="heightLightText">{{newOrder.msg.duration}}</text> </view>
						<view>请尽快处理</view>
					</view>

					<view class="jiedan_btn" @tap="toHandle()">去处理</view>

					<view class="closeIcon iconfont icon-guanbi1"></view>
				</view>
			</view>
		</view>

		<view class="tabBar_foot flex flex--align-items--center flex--justify-content--center" style="display: flex;
    justify-content: space-around;">
			<view class="tabBar_foot_list flex flex--row flex--align-items--center" @click.top="setSelected(1)">
				<view v-if="activeShow==1" class="tabBarIcon">
					<image src="/static/image/tabbar/index_active.png" style="width: 50rpx;" mode="widthFix">
					</image>
				</view>
				<view v-else class="tabBarIcon">
					<image src="/static/image/tabbar/index.png" style="width: 50rpx;" mode="widthFix"></image>
				</view>
				<text :class="activeShow === 1 ? 'activeTabText' : ''">首页</text>
			</view>

			<view class="tabBar_foot_list flex flex--row flex--align-items--center" @click.top="setSelected(2)">
				<view v-if="activeShow==2" class="tabBarIcon">
					<image src="/static/image/tabbar/placeorder_active.png" mode="widthFix"></image>
				</view>
				<view class="tabBarIcon" v-else>
					<image src="/static/image/tabbar/placeorder.png" mode="widthFix"></image>
				</view>
				<text :class="activeShow === 2 ? 'activeTabText' : ''">派单</text>
			</view>
			<view class="tabBar_foot_list flex flex--row flex--align-items--center" @click.top="setSelected(3)">
				<view v-if="activeShow==3" class="tabBarIcon">
					<image src="/static/image/tabbar/mall_active.png" mode="widthFix"></image>
				</view>
				<view class="tabBarIcon" v-else>
					<image src="/static/image/tabbar/mall.png" mode="widthFix"></image>
				</view>
				<text :class="activeShow === 3 ? 'activeTabText' : ''">助娱达人</text>
			</view>
			<view class="tabBar_foot_list flex flex--row flex--align-items--center" @click.top="setSelected(4)">
				<view v-if="activeShow==4" class="tabBarIcon">
					<image src="/static/image/tabbar/user_active.png" mode="widthFix"></image>
				</view>
				<view class="tabBarIcon" v-else>
					<image src="/static/image/tabbar/user.png" mode="widthFix"></image>
				</view>
				<text :class="activeShow === 4 ? 'activeTabText' : ''">个人中心</text>
			</view>
		</view>
	</view>
</template>

<script>
	import index from '../index/index'
	import hallList from '../hallList/hallList'
	import message from '../message/message'
	import dispatch from '../dispatch/dispatch'
	import helpHappy from '../helpHappy/helpHappy.vue'
	import my from '../my/my'
	import QQMapWX from '../../static/qqmap-wx-jssdk.min.js'

	import wx from '../../node_modules/weixin-js-sdk/index.js'
	export default {
		components: {
			index,
			my,
			hallList,
			message,
			dispatch,
			helpHappy
		},
		data() {
			return {
				playList: [],
				statusBarHeight: 0,
				navHeightNoBar: 0,
				navHeight: 0,
				isShow: true, //切换首页显示和个人中心显示
				swiperList: [],
				labelList: [],
				moneyList: [],
				addServWeixin: false,
				addPersonalWeixin: false,
				codeImage: '',
				wxCode: '',
				userInfo: null,
				orderCount: null,
				identity: null,
				nums: 0,
				address: '',
				accountShow: false,
				firstContent: '',
				isXie: false,
				activeShow: 1,
				dialog: false,
				webSocket: null,
				newOrder: {},
				playType: [],
				ipAddress: {}, //IP信息
				playListIndex: 1, //陪玩列表页面
				showEnd: false,
				soreType: {
					id: 0, //0综合排序类型 1价格排序类型 2时长排序类型
					type: "" //排序类型输入字符串
				},
				reward:0 //打赏金额
			}
		},
		watch: {
			isShow(e) {
				if (!this.isShow) {
					this.getOrderCount()
					return
				}
			}
		},
		onHide() {
			this.webSocket.close()
		},
		onLoad() {
			this.getBanner()
			this.getLabel()
			this.getMoney()
			this.getIsInfo()
			this.getPlayType()
			if (this.accountShow) return
			let first = uni.getStorageSync('first')
			if (!first) {
				this.isXie = true
			}
			this.getIpAddress()
			this.getPlayNum()
			//this.verifyVersion()
			if (uni.getStorageSync("token")) {
				this.initWebPage()
			}
			this.getReward()
			this.getPlayList()
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
				this.getOrderCount()
				// this.initWebPage()
			}
			this.connGptFun()
			//this.playListIndex = 1
			
			//同步更新刷新index页面图片加载情况
			if(uni.getStorageSync("playUser")){
				let tempPlayer=uni.getStorageSync("playUser")
				console.log("获取到当前的临时数据",tempPlayer)
					
				//对比校验本地playList
				let playList=this.playList
				//刷新加载情况的最新数据
				playList.forEach(item => {
				  if (item.live_openid == tempPlayer.live_openid) {
				    console.log("找到了当前的对象：")
					console.log(item);
					item=tempPlayer
				  }
				});
				this.playList=playList
			}
		},
		onReachBottom() {
			//刷新下一页数据
			if(!this.showEnd&&(this.activeShow==1||this.activeShow==3)){
				this.playListIndex = this.playListIndex + 1
				this.getPlayList()
			}
		},
		methods: {
			async getReward(){
				let data = await this.$http('/appapi/order/get_reward')
				this.reward=data.reward
			},
			//首页加载完后缩略图显示
			imageLoad(index){
				this.playList[index].images[0].imgLoaded=true
				//console.log(index+"张图片加载好了")
			},
			//首页加载错误显示错误图片
			badImg(index){
				this.playList[index].images[0].url="../../static/image/imgFail.png"
			},
			async initWebPage() {
				var that = this
				console.log("初始化微信公众号api")
				let url=window.location.search
				console.log("当前url为"+url)
				let data = await this.$http('/appapi/member/get_signature',{
					url:url
				})
				console.log("===============initWebPage===============")
				console.log(data)
				
				
				if (data) {
					wx.config({
						debug: false, // 开启调试模式,
						appId: data.appid, // 必填，企业号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.noncestr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ['scanQRCode', 'getLocation'], // 必填，需要使用的JS接口列表
					});
					wx.ready(() => {
						console.log('成功获取权限')
						console.log("调用回去地址API")
						that.getH5Location()
					})
					wx.error(function(res) {
						// uni.showModal({
						// 	content:"微信sdk权限获取失败"+JSON.stringify(data)
						// })
						uni.showToast({
							title:"微信sdk权限获取失败",
							icon:"none"
						})
						console.log('获取扫码权限出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
					});
				}
			},
			getUrlParams(url) {
				var params = {};
				// 使用正则表达式匹配参数
				var matches = url.match(/[\?&]([^=#]+)=([^&#]*)/g);
			
				if (matches) {
					for (var i = 0; i < matches.length; i++) {
						var match = matches[i];
			
						// 去除 ? 或 & 符号
						match = match.substring(1);
			
						// 分割参数和值
						var pair = match.split("=");
						var key = decodeURIComponent(pair[0]);
						var value = decodeURIComponent(pair[1]);
			
						// 将参数添加到对象中
						params[key] = value;
					}
				}
				return params;
			},
			//扫码方法
			scanCode(){
				var that=this
				console.log("调用了父类的scanCode方法")
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						console.log("扫描成功")
						console.log(res)
						var url = res.resultStr
						if (url.includes('https://qw.lod8.cn/')) {
							var parameters = that.getUrlParams(url)
							uni.navigateTo({
								url: "/pages/scanCodeBinding/scanCodeBinding?bindType=" +
									parameters
									.action + "&id=" + parameters.id
							})
						}else{
							uni.showToast({
								title:"请扫描业务二维码",
								icon:"none"
							})
						}
						// uni.showModal({
						// 	content:JSON.stringify(res.resultStr)
						// })
					},
					fail: function(res) {
						console.log("扫描失败", res)
						uni.showToast({
							title: "扫描失败",
							icon: "none"
						})
						// uni.showModal({
						// 	content:JSON.stringify(res)
						// })
					},
				});
			},
			getH5Location() {
				console.log("================getH5Location================")
				var that = this
				wx.getLocation({
					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function(res) {
						console.log(res)
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						var speed = res.speed; // 速度，以米/每秒计
						var accuracy = res.accuracy; // 位置精度
						// console.log(res)
						that.setLoacl(res)
					}
				})
			},
			async setLoacl(res) {
				console.log("=================setLoacl写入位置信息=================")
				let data = await this.$http("/appapi/member/address", {
					lat: res.latitude,
					lng: res.longitude
				})
			},
			async searchInput(searchModal) {
				var that=this
				console.log("searchModal")
				const {
					data
				} = await this.$http('/appapi/play_with/lists', {
					search: searchModal
				})
				data.forEach((v) => {
					 let result
					 //判断为初始赋值还是刷新值
					 if(that.playList.length<=0){
					 	  result= v.images.map(url => ({ url, imgLoaded: false }));
					 }else{
					 	 result= v.images.map(url => ({ url, imgLoaded: true }));
					 }
					  v.images=result
				 })
				this.playList = data
			},
			async getPlayType() {
				const data = await this.$http('/appapi/member/label_list')
				this.playType = data
			},
			toHandle() {
				uni.navigateTo({
					url: "/pages/playHome/playHome"
				})
			},
			connGptFun() {
				this.webSocket = wx.connectSocket({ //链接wss服务
					url: "wss://qw.lvd8.cn/ws",
					success: () => {

					}
				})
				this.webSocket.onError((e) => {

				})
				// 打开websocket
				this.webSocket.onOpen((e) => {

					this.connectionSocket(e)
				})
				//监听消息
				this.webSocket.onMessage((e) => {
					this.listeningForMessage(e)
				})
				this.webSocket.onClose((e) => {})
			},
			listeningForMessage(e) {
				var that = this
				if (e.data == "pong") {
					return;
				}
				let {
					data
				} = JSON.parse(e.data)
				if (data && this.identity == 2) {
					let userData = JSON.parse(data[0].msg)
					this.newOrder = data[0]
					this.newOrder.msg = userData
					this.handleShowDialog()
				}
			},
			//建立连接
			connectionSocket(e) {
				let userToken = uni.getStorageSync("token")
				var json = JSON.stringify({
					"type": "qw_login",
					"openid": userToken
				})
				this.webSocket.send({
					data: json,
				})
				this.sendPing();
			},
			sendPing() {
				this.webSocket.send({
					data: "ping",
				})
				setTimeout(() => {
					this.sendPing();
				}, 30000);
			},
			handleShowDialog() {
				// 创建音频实例
				var audio = uni.createInnerAudioContext();
				// 设置音频源
				audio.src = 'https://qw.lvd8.cn/sound/neworder.mp3';
				// 播放音频
				audio.play();
				this.dialog = true
			},
			hideDialog() {
				this.dialog = false
			},
			async getPlayList() {
				var that = this
				var reqParm = {
					page: this.playListIndex
				}
				if (this.soreType.id == 1 || this.soreType.id == 2) {
					reqParm.order = this.soreType.type
				}
				const {
					data
				} = await this.$http('/appapi/play_with/lists', {
					...reqParm
				})
				console.log("第" + this.playListIndex + "页数据为", data)
				console.log(data.length)
				if (data.length <= 0) {
					//console.log("到底了哦，显示到底的全部数据提示")
					if(!this.showEnd){
						this.showEnd = true
					}
					return
				}
				//第一页数据处理
				if (this.playListIndex == 1) {
					 data.forEach((v) => {
						 let result
						 if(that.playList.length<=0){
						 	  result= v.images.map(url => ({ url, imgLoaded: false }));
						 }else{
						 	 result= v.images.map(url => ({ url, imgLoaded: true }));
						 }
						  v.images=result
					 })
					that.playList = data
					//翻页后的数据处理
				} else {
					data.forEach((v) => {
						let result = v.images.map(url => ({ url, imgLoaded: false }));
						v.images=result
						that.playList.push(v)
					})
					if (data.length < 10) {
						if(!that.showEnd){
							that.showEnd = true
						}
					}
				}
			},
			async getIsInfo() {
				const data = await this.$http('/appapi/system/info', {
					type: 8
				})
				this.firstContent = data.content
			},
			getSysInfo() {
				let menuButtonObject = wx.getMenuButtonBoundingClientRect();
				wx.getSystemInfo({
					success: res => {
						let statusBarHeight = res.statusBarHeight,
							navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top -
								statusBarHeight) * 2; //导航高度
						this.navHeight = navHeight;
						this.statusBarHeight = res.statusBarHeight
						this.navHeightNoBar = navHeight - statusBarHeight
					},
					fail(err) {

					}
				})
			},
			// 申请接单师
			goApply() {
				// if (this.accountShow) return
				// if (this.userInfo.wx_num === '' || this.userInfo.wx_num === null) {
				// 	uni.showToast({
				// 		title: '请添加微信信息',
				// 		icon: 'none'
				// 	})
				// } else {
				// }				
				uni.navigateTo({
					url: '/pages/apply/apply'
				})
			},
			async goPlayHome() {
				if (this.accountShow) return
				const {
					data
				} = await this.$http('/appapi/play_with/info')

				if (data.state === 1) {
					uni.navigateTo({
						url: '/pages/playHome/playHome'
					})
				} else {
					if (data.state === 0) {
						uni.showToast({
							title: '审核中',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: data.reason || '已驳回',
							icon: 'none',
							duration: 1500,
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/applyOrderReceiver/applyOrderReceiver'
									})
								}, 1500)
							}
						})
					}
				}
			},
			// 获取轮播图
			async getBanner() {
				const data = await this.$http('/appapi/banner/lists_to')
				this.swiperList = data
			},
			// 获取订单数量
			async getOrderCount() {
				const data = await this.$http('/appapi/order/order_count')
				this.orderCount = data
			},
			// 获取标签
			async getLabel() {
				const data = await this.$http('/appapi/tagsdo/lists')
				data.forEach((v) => {
					v['isShow'] = false
				})
				this.labelList = data
			},
			// 获取金额
			async getMoney() {
				const data = await this.$http('/appapi/tags_price/lists')
				data.forEach((v) => {
					v['isShow'] = false
				})
				this.moneyList = data
			},
			async getIpAddress() {
				const data = await this.$http('/appapi/member/get_address');
				this.ipAddress = data
			},
			//获取不同排序的陪玩列表
			async getSortPlayList(data) {
				this.playListIndex = 1 //刷新页面
				this.showEnd=false 	   //刷新状态
				let sortType = ""
				this.soreType.id = data.id
				//console.log(data)
				if (data.id == 0) {
					this.soreType.id = 0
				} else if (data.id == 1) {
					
					if (data.sort) {
						sortType = "price asc"
					} else {
						sortType = "price desc"
					}
				} else {
					if (data.sort) {
						sortType = "start_hour asc"
					} else {
						sortType = "start_hour desc"
					}
				}
				this.soreType.type = sortType
				console.log(this.soreType)
				this.getPlayList()
			},
			async getPlayNum() {
				var that = this
				const data = await this.$http('/appapi/member/play_with_num')
				that.nums = data || 0
			},
			// 获取个人信息
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				this.userInfo = data
				this.identity = data.identity
			},

			// index页面（标签）传过来的值
			setLabel(labelList) {
				this.labelList = labelList;
			},
			// 更新金额数据
			choiceDoWhat(moneyList) {
				this.moneyList = moneyList;
			},
			// 从index页面调用的打开添加我的微信
			goAddWeixi() {
				uni.navigateTo({
					url: "/pages/userEdit/userEdit"
				})
			},
			// my 返回
			returnMy(type) {
				if (type == 1) {
					this.addPersonalWeixin = false
					setTimeout(() => {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}, )
				} else {
					this.addServWeixin = false
				}
				this.getUserInfo()
			},
			// 获取客户信息
			async getSevrInfo(type) {
				const data = await this.$http('/appapi/system/info', {
					type: type
				})
				if (type == 2) {
					this.codeImage = data.content
				} else {
					this.wxCode = data.content
				}
			},
			// 在我的页面打开客服
			openAddKuWeixin() {
				this.keFuWeixi()
			},
			// 打开添加微信
			openAddPersonalWeixin() {
				this.addPersonalWeixin = true
			},
			// 打开客服弹框公共代码
			keFuWeixi() {
				this.addServWeixin = true
				this.getSevrInfo(2)
				this.getSevrInfo(3)
			},
			// tabBar切换页面
			setSelected(type) {
				if (!uni.getStorageSync('token')) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				//显示
				//type === 1 ? this.isShow = true : this.isShow = false;
				this.activeShow = type
				
				//模糊查询后返回列表显示完整数据
				if(type==1){
					this.playListIndex = 1 //刷新页面
					this.showEnd=false 	   //刷新状态
					this.getPlayList()
				}
			}
		}
	}
</script>

<style lang="less">
	.heightLightText {
		color: #FA97B4;
		padding: 0 10rpx;
	}

	.jiedan_btn {
		background-color: #FA97B4;
		color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		text-align: center;
		margin-top: 20%;
	}

	.dislog_title {
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
	}

	.opea_btn {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.opea_btn_calcel {
		background-color: #EF0303;
	}

	.opea_btn_Sure {
		background-color: #07A714;
	}

	.dialog {
		background-color: rgba(0, 0, 0, .2);
		width: 100%;
		position: fixed;
		height: 100%;
		z-index: 100;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.dialog_content {
		width: 80%;
		height: 60%;
		margin: auto;
		border-radius: 50rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		position: relative;
		display: flex;
		align-items: center;
	}


	.dialog_content_desc {
		width: 60%;
		height: 40%;
		background-color: #fff;
		border-radius: 25rpx;
		padding: 10%;
		font-size: 25rpx;
		box-shadow: 0 0 15rpx #c7c7c7;
		text-align: left;
		position: relative;
	}

	.content_desc_text {
		color: #757070;
	}

	.content_desc_textHighLight {
		color: #4BB0FD;
	}

	.showImg {
		animation: showImg 0.2s linear;
		animation-fill-mode: forwards;
	}

	.hideImg {
		animation: hideImg 0.2s linear;
		animation-fill-mode: forwards;
	}

	@keyframes showImg {
		0% {
			transform: scale(0.1);
		}

		100% {
			transform: scale(1.3);
		}
	}

	@keyframes hideImg {
		0% {
			transform: scale(1.3);
		}

		100% {
			transform: scale(0.1);
		}
	}

	.closeIcon {
		position: absolute;
		width: 40rpx;
		right: 5%;
		top: 5%;
	}

	.tabBarIcon {
		width: 120rpx;
		text-align: center;

		image {
			max-width: 120rpx;
			text-align: center;
		}
	}

	.tabBar {
		height: 100%;

		.popup {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .37);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			.popupContent {
				width: 550rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 28rpx 28rpx 0 28rpx;

				.popupContentTitle {
					padding: 20rpx 0;
					font-size: 40rpx;
					font-weight: bold;
				}

				.popupContentText {
					max-height: 600rpx;
					overflow: auto;
					font-size: 28rpx;
					color: #999;
				}

				.popupContentBtn {
					width: 100%;
					height: 110rpx;

					view {
						width: 50%;
						height: 100%;
						line-height: 110rpx;
						text-align: center;
						font-size: 30rpx;
					}
				}
			}
		}

		.index_head {
			.index_head_con {
				position: relative;

				.index_head_con_btn {
					padding: 12rpx 32rpx;
					background: #fa97b4;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #fff;
					position: fixed;
					top: 2%;
					left: 14rpx;
					z-index: 999;
					opacity: .8;
				}

				.index_head_con_title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.box {
			flex: 1;
			// overflow: auto;
		}

		.tabBar_foot {
			background-color: #fff;
			transition: 0.2s linear;
			height: 164rpx;
			position: fixed;
			width: 100vw;
			bottom: 0;

			.tabBar_foot_list {
				flex: 1;

				.activeTabText {
					color: #FA97B4;
				}

				view {
					height: 58rpx;

					image {
						width: 45rpx;
					}
				}

				text {
					color: #BFBFBF;
					margin-top: 8rpx;
					font-size: 26rpx;
				}

				&:first-of-type image {
					width: 50%;
				}
			}
		}
	}
</style>